<template>
  <div id="Shop">
    <div class="shop-top">
      <div class="name">{{ info.name }}</div>
      <div class="score">
        <div>
          <van-rate
            v-model="info.score"
            :size="20"
            color="#ffd21e"
            :allow-half="true"
            void-icon="star"
            void-color="#eee"
          />
          (100) 月售100单
        </div>
        <span>已收藏</span>
      </div>
    </div>
    <div class="shop-center">
      <div class="header">
        <div class="minPrice">
          <h3>起送价</h3>
          <p>
            <span>{{ info.minPrice }}</span
            >元
          </p>
        </div>
        <div class="deliveryPrice">
          <h3>商家起送</h3>
          <p>
            <span>{{ info.deliveryPrice }}</span
            >元
          </p>
        </div>
        <div class="deliveryTime">
          <h3>平均起送时间</h3>
          <p>
            <span>{{ info.deliveryTime }}</span
            >分钟
          </p>
        </div>
      </div>
      <div class="Notice">
        <h3 class="title">公告与活动</h3>
        <div class="info">{{ info.bulletin }}</div>
        <div
          class="supports"
          v-for="(item, index) in info.supports"
          :key="index"
        >
          <i class="iconfont icon-manjianyouhui"></i>
          {{ item }}
        </div>
      </div>
      <div class="avatar">
        <h3>商家实景</h3>
        <img width="150px" :src="info.avatar" alt="" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    info: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    info: {
      handler () { }
    },
    deep: true
  },
  mounted () {
    console.log('this.info :>> ', this.info);
  }
}
</script>

<style lang="less" scoped>
#Shop {
  padding: 15px;
  .shop-top {
    padding-bottom: 25px;
    border-bottom: 1px solid #ccc;
    .name {
      font-size: 22px;
      font-weight: 700;
      line-height: 2;
    }
    .score {
      display: flex;
      justify-content: space-between;
      color: #ccc;
    }
  }
  .shop-center {
    padding-top: 20px;
    .header {
      padding-bottom: 40px;
      display: flex;
      justify-content: space-between;
      text-align: center;
      line-height: 22px;
      h3 {
        color: #ccc;
      }
      p {
        font-size: 14px;
        span {
          font-size: 18px;
        }
      }
    }
    .Notice {
      padding-bottom: 40px;
      .title {
        font-size: 20px;
        font-weight: 700;
      }
      .info {
        padding: 5px;
        line-height: 24px;
        color: #da7856;
      }
    }
    .supports {
      padding-top: 10px;
      i {
        font-size: 20px;
      }
    }
    .avatar{
      h3{
        font-size: 20px;
        font-weight: 700;
        line-height: 24px;
      }
    }
  }
}
</style>